<template>
  <main class="role">
    <c-card>
      <a-row class="operation-bar">
        <c-btn span="1" type="primary" title="新增" @click="add"></c-btn>
      </a-row>
      <a-table :rowKey="record=>Math.random()"
               @change="tableChangeHandler"
               :columns="columns"
               :pagination="{total:tableTotal,pageSize:params.pageSize,current:params.pageNum}"
               :data-source="tableData">
        <a-switch slot="activeFlag"
                  slot-scope="text,row"
                  :checked="text"
                  @click="activeChangeHandler(row)"
                  checkedChildren="启用"
                  unCheckedChildren="禁用"/>
      </a-table>
    </c-card>
    <a-modal v-model="visible.post" title="新增" width="800px" :destroyOnClose='true' :footer="false">
      <post :visible.sync="visible.post" :type="type" :editData="editData" @success="addSuccessHandler"/>
    </a-modal>
  </main>
</template>

<script lang="js">
import {userList, userDel, userEdit} from "@/api/user";
import post from "./post";

export default {
  components: {
    post
  },
  data() {
    return {
      columns: [
        {title: '用户名', dataIndex: 'userName'},
        {title: '昵称', dataIndex: 'nickName'},
        {title: '联系方式', dataIndex: 'phone'},
        {title: '是否启用', dataIndex: 'activeFlag', scopedSlots: {customRender: "activeFlag"}},
        {
          title: '操作',
          key: 'action',
          align: 'center',
          customRender: (text, row) => {
            return <p><a onClick={() => this.setEditData(row)} style="margin-right:10px">编辑</a><a
                onClick={() => this.removeData(row)} style="color:red">删除</a></p>
          },
        },
      ],
      tableData: [],
      visible: {
        post: false
      },
      tableTotal: 0,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      editData: {},
      type: 'add'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async activeChangeHandler(e) {
      const params = {...e}
      params.activeFlag = !params.activeFlag;
      const res = await userEdit(params);
      if (res['msg'] === 'ok') {
        this.$message.success('操作成功')
      } else {
        this.$message.error(res.msg)
      }
      this.getList();
    },
    async getList() {
      const params = {...this.params};
      const res = await userList(params);
      if (res['data']) {
        this.tableData = res['data']['list'];
        this.tableTotal = res['data']['total']
      }
    },
    tableChangeHandler(e) {
      this.params.pageNum = e.current;
      this.getList();
    },
    add() {
      this.type = 'add'
      this.visible.post = true
    },
    addSuccessHandler() {
      this.getList();
    },
    setEditData(row) {
      this.editData = row;
      this.type = 'edit';
      this.visible.post = true;
    },
    removeData(row) {
      this.$confirm({
        title: '确认删除该数据？',
        onOk: () => {
          this.deleteData(row.userId);
        }
      })
    },
    async deleteData(id) {
      const res = await userDel({userId: id});
      if (res.msg === 'ok') {
        this.$message.success('删除成功');
        this.getList()
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
